<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <script type="text/javascript">
    
    function showLoading() {
		$("#showmore").css('display', 'block');
		var $wallcontent = $('#wallcontent'), pagenum = 1, $showmore = $('#showmore');
		function loadshots() {
			var l = Ladda.create(this);
			l.start();
		}
		$showmore.bind('click', loadshots);
		$showmore.trigger('click');
	}
	
	function hideLoading() {
		$("#showmore").css('display', 'none');
		var $wallcontent = $('#wallcontent'), pagenum = 1, $showmore = $('#showmore');
		function loadshots() {
			var l = Ladda.create(this);
			l.stop();
		}
		$showmore.bind('click', loadshots);
		$showmore.trigger('click');
	}
	
	$(function() {
		init();
	})
	
	function init(){
		$.ajax({
			type:"POST",
			url: path+'local/getNodesList',
			success: function(result){
				if(result){
					$("#addServiceTbody").html("");
					$("#serviceTbody").html("");
					for(var i = 0; i<result.result[$("#nodeIp").val()].services.length;i++){
						for(var item in result.result[$("#nodeIp").val()].services[i]){
							if(result.result[$("#nodeIp").val()].services[i][item].state==1){
								var appendStr = "<tr><td><a href='#'>"+item+"</a></td>";
								appendStr+="<td><b>"+$("#nodeIp").val()+"</b></td>";
								appendStr = showStatus(appendStr,item,$("#nodeIp").val(),1);
								appendStr+="<td><a data-toggle='modal' data-target='#myModal2' title='日志文件' onclick='showLog(\""+$("#nodeIp").val()+"\",\""+item+"\")'></i>日志文件</a>&nbsp;<a title='程序输出' onclick='programOutput(\""+$("#nodeIp").val()+"\",\""+item+"\")' data-toggle='modal' data-target='#myModal'>程序输出</a></td></tr>";
								$("#serviceTbody").append(appendStr);
							}else{
								var appendStr = "<tr><td><a href='#'>"+item+"</a></td>";
								appendStr+="<td><b>"+$("#nodeIp").val()+"</b></td>";
								appendStr = showStatus(appendStr,item,$("#nodeIp").val(),0);
								appendStr+="<td><a href='#' title='添加' onclick='changeState(\""+item+"\",\""+$("#nodeIp").val()+"\",1)'><i class='fa fa-plus text-blue'></i>添加</a></td></tr>";
								$("#addServiceTbody").append(appendStr);
							}
						}
					}
				}	
			}
		});
	}
	
	function showLog(item,serviceName){
		$.ajax({
			type:"POST",
			url: path+'cluster/showLogList',
			data:{serviceName:serviceName,ip:item},
			success: function(result){
				$("#cotentBodyLog").html("");
				for(var i = 0;i<result.result[serviceName].logfiles.length;i++){
					var appendStr = "<a href='#' title='日志' onclick='programOutputAfter(\""+result.result[serviceName].logfiles[i]+"\",\""+serviceName+"\",\""+item+"\",1)'><i class='fa fa-plus text-blue'></i>"+result.result[serviceName].logfiles[i]+"</a><br />";
					$("#cotentBodyLog").append(appendStr);
				}
			}
		});
		
	}


	function programOutputAfter(fileName,serviceName,item){
		$('#myModal2').modal('hide');
		$('#myModal').modal('show');
		$("#logServiceName").val(serviceName);
		$("#logIp").val(item);
		$("#logFile").val(fileName);
		 $("#startline").val(-1);
		 $("#linenum").val(-20);
		 $("#totalnum").val(-1);
		$.ajax({
			type:"POST",
			url: path+'cluster/showProgramOutput',
			data:$("#logForm").serialize(),
			success: function(result){
				$("#cotentBody").html("");
				 if(result){
					 $("#cotentBody").html(result.result[serviceName].content);
					 $("#logFile").val(result.result[serviceName].file);
					 $("#startline").val(result.result[serviceName].startline);
					 $("#linenum").val(result.result[serviceName].linenum);
					 $("#totalnum").val(result.result[serviceName].totalnum);
				 }
			}
		}); 
	}

	function programOutput(item,serviceName){
		$("#logServiceName").val(serviceName);
		$("#logIp").val(item);
		$("#logFile").val("");
		 $("#startline").val(-1);
		 $("#linenum").val(-20);
		 $("#totalnum").val(-1);
		$.ajax({
			type:"POST",
			url: path+'cluster/showProgramOutput',
			data:$("#logForm").serialize(),
			success: function(result){
				$("#cotentBody").html("");
				 if(result){
					 console.dir(result);
					 $("#cotentBody").html(result.result[serviceName].content);
					 $("#logFile").val(result.result[serviceName].file);
					 $("#startline").val(result.result[serviceName].startline);
					 $("#linenum").val(result.result[serviceName].linenum);
					 $("#totalnum").val(result.result[serviceName].totalnum);
				 }
			}
		}); 
	}

	function goPage(status){
		var startIndex =0;
		var startline = $("#startline").val();
		var linenum = $("#linenum").val();
		var totalnum  = $("#totalnum").val();
		if(status==-1){
			if(startline==1){
				alert('已经是第一页');
				return;
			}else{
				if(parseInt(startline)-parseInt(linenum)>=1){
					startIndex = parseInt(startline)-parseInt(linenum);
					$("#startline").val(startIndex);
				}else{
					startIndex = 1;
				}
			}
		}else{
			if(startline==totalnum){
				alert('已经是最后一页');
				return;
			}else{
				if(parseInt(totalnum)-parseInt(startline)>=linenum){
					startIndex = parseInt(startline)+parseInt(linenum);
					$("#startline").val(startIndex);
				}else{
					//startIndex = totalnum;
					alert('已经是最后一页');
					return;
				}
			}
		}
		
		$.ajax({
			type:"POST",
			url: path+'cluster/showProgramOutput',
			data:$("#logForm").serialize(),
			success: function(result){
				$("#cotentBody").html("");
				 if(result){
					 for(var item in result.result){
						 $("#cotentBody").html(result.result[item].content);
						 $("#startline").val(startIndex);
					 }
				 }
			}
		}); 
	}
	
	function showStatus(appendStr,serviceName,ip,state){
	$.ajax({
		cache:false,
		async:false,
		type:"POST",
		url: path+'cluster/getNodeStatus',
		data:{serviceName:serviceName,ip:ip},
		success: function(result){
			if(result){
				var status = result.result[serviceName].status;
				if(status=="starting"){
					appendStr+="<td><img id='u75_img'  src='../dist/img/u37.png'></td>";
					if(state==1){
						appendStr+="<td><a href='#' title='重启' onclick='onclick='reStartNode(\""+serviceName+"\",\""+ip+"\")'(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-refresh text-green'></i>重启</a><a href='#' title='停止' onclick='stopNode(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-stop text-yellow'></i>停止</a></td>";	
					}
				}else if(status=="running"){
					appendStr+="<td><img id='u75_img'  src='../dist/img/u37.png'></td>";
					if(state==1){
						appendStr+="<td><a href='#' title='重启' onclick='reStartNode(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-refresh text-green'></i>重启</a><a href='#' title='停止' onclick='stopNode(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-stop text-yellow'></i>停止</a></td>";	
					}
				}else if(status=="stopping"){
					appendStr+="<td><img id='u75_img'  src='../dist/img/u131.png'></td>";
					if(state==1){
						appendStr+="<td><a href='#' title='启动' onclick='startNode(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-play text-blue'></i>启动</a><a href='#' title='删除' onclick='changeState(\""+serviceName+"\",\""+ip+"\",0)'><i class='fa fa-close text-red'></i>删除</a></td>";	
					}
				}else{
					appendStr+="<td><img id='u75_img'  src='../dist/img/u131.png'></td>";
					if(state==1){
						appendStr+="<td><a href='#' title='启动' onclick='startNode(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-play text-blue'></i>启动</a><a href='#' title='删除' onclick='changeState(\""+serviceName+"\",\""+ip+"\",0)'><i class='fa fa-close text-red'></i>删除</a></td>";	
					}
				}
			}
		}
	});
	return appendStr;
}
	
	function startNode(serviceName,ip){
		if(confirm('确实要启动吗?')){
			$.ajax({
				cache:false,
				async:true,
				type:"POST",
				url: path+'cluster/startNodeByIpAndServiceName',
				data:{serviceName:serviceName,ip:ip},
				beforeSend:function(xhr){
					showLoading();
				},
				success: function(result){
					if(result){
						alert("启动成功");
						init();
					}
				},
				complete:function(xhr){
					hideLoading();
				}
			});
		}
	}

	function stopNode(serviceName,ip){
		if(confirm('确实要停止吗?')){
			$.ajax({
				cache:false,
				async:true,
				type:"POST",
				url: path+'cluster/stopNodeByIpAndServiceName',
				data:{serviceName:serviceName,ip:ip},
				beforeSend:function(xhr){
					showLoading();
				},
				complete:function(xhr){
					hideLoading();
				},
				success: function(result){
					if(result){
						alert("停止成功");
						init();
					}
				}
			});
		}
	}

	function reStartNode(serviceName,ip){
		if(confirm('确实要重新启动吗?')){
			$.ajax({
				cache:false,
				async:true,
				type:"POST",
				url: path+'cluster/stopNodeByIpAndServiceName',
				data:{serviceName:serviceName,ip:ip},
				beforeSend:function(xhr){
					showLoading();
				},
				complete:function(xhr){
					hideLoading();
				},
				success: function(result){
					if(result){
						$.ajax({
							cache:false,
							async:false,
							type:"POST",
							url: path+'cluster/startNodeByIpAndServiceName',
							data:{serviceName:serviceName,ip:ip},
							success: function(result){
								if(result){
									alert("重新启动成功");
									init();
								}
							}
						});
					}
				}
			});
		}
	}
	
	function changeState(serviceName,ip,state){
		if(confirm('确实要进行此操作吗?')){
			$.ajax({
				type:"POST",
				url: path+'cluster/updateState',
				data:{serviceName:serviceName,ip:ip,state:state},
				success: function(result){
					 if(result){
						 alert("操作成功");
						 init();
					 }
				}
			}); 
		}
	}
</script>


  <div class="box-header with-border">
    <h3 class="box-title">${nodeIp } / NODE${localId }</h3>
    <!-- /.box-tools -->
  </div>
<div class="box box-primary">
  <!-- /.box-header -->
  <div class="box-body no-padding">
    <div class="table-responsive mailbox-messages">
      <table class="table table-bordered">
      	<thead>
      		<tr style="background-color: #f9f9f9;">
      		<th>服务</th>
      		<th>IP</th>
      		<th>状态</th>
      		<th>操作</th>
      		<th>日志查看</th>
      		</tr>
      	</thead>
        <tbody id="serviceTbody">
        </tbody>
      </table>
      <!-- /.table -->
    </div>
    <!-- /.mail-box-messages -->
  </div>
  <!-- /.box-body -->
  
</div>
<div class="box box-primary">
  <div class="box-header with-border">
    <h3 class="box-title">可添加服务</h3>
    <!-- /.box-tools -->
  </div>
  <!-- /.box-header -->
  <div class="box-body no-padding">
    <div class="table-responsive mailbox-messages">
      <table class="table table-bordered">
      	<thead>
      		<tr style="background-color: #f9f9f9;">
      		<th>服务</th>
      		<th>IP</th>
      		<th>状态</th>
      		<th>操作</th>
      		</tr>
      	</thead>
        <tbody id="addServiceTbody">
        </tbody>
      </table>
      <!-- /.table -->
    </div>
    <!-- /.mail-box-messages -->
  </div>
  <!-- /.box-body -->
  <input id="localId" type="hidden" value="${localId }">
  <input id="nodeIp" type="hidden" value="${nodeIp }">
</div>


	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">
               日志输出
            </h4>
         </div>
         <div class="modal-body" id="cotentBodyLog">
             
         </div>
         <div class="modal-footer">
            <!-- <ul class="pagination" id="paginationLog">
            	<li><a href='#' onclick='goPage(-1)'>上一页</a></li>
            	<li><a href='#' onclick='goPage(0)'>下一页</a></li>
			</ul> -->
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">
               程序输出
            </h4>
         </div>
         <div class="modal-body" id="cotentBody">
             
         </div>
         <div class="modal-footer">
            <ul class="pagination" id="pagination">
            	<li><a href='#' onclick='goPage(-1)'>上一页</a></li>
            	<li><a href='#' onclick='goPage(0)'>下一页</a></li>
			</ul>
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<form id="logForm">
		<input type="hidden" name="serviceName" id="logServiceName" />
		<input type="hidden" name="ip" id="logIp" />
		<input type="hidden" name="type" value="stdout" />
		<input type="hidden" name="file" id="logFile" />
		<input type="hidden" name="startline" id="startline"  value="-1"/>
		<input type="hidden" name="linenum" id="linenum" value="-20" />
		<input type="hidden" name="totalnum" id="totalnum"  value="-1"/>
	</form>
	
<button type="button" style="display: none;position: fixed;left: 50%;right: 50%;margin-left: width/2;margin-top:height/2;"
class="btn btn-warning btn-lg ladda-button center-block"
id="showmore" title="显示更多前端代码回放" data-style="contract-overlay">
<span class="ladda-label"> 更多设计 </span>
</button>